<template>
  <div id="map" class="app-container">
    <div class="plotting-tool">
      <div>
        <el-button type="primary" size="mini" @click="startDrawPoint">创建点</el-button>
      </div>
      <div style="margin-top: 10px">
        <el-switch v-model="isEdit" :inactive-text="isEdit ? '已启用编辑' : '以禁用编辑'"></el-switch>
      </div>
    </div>
  </div>
</template>

<script>
import { initViewer } from '@/utils/cesiumUtils'
import CreatePoint from '@/drawUtils/CreatePoint.js'
import EditPoint from '@/drawUtils/EditPoint.js'

export default {
  data() {
    return {
      isEdit: false,
      viewer: null
    }
  },
  mounted() {
    this.viewer = initViewer('map')
    this.handleEventWatch(this.viewer)
  },
  methods: {
    startDrawPoint() {
      let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
      CreatePoint(this.viewer, handler, [], {},
        function (e) {
          console.log(e);
        }
      );
    },
    // 事件监听
    handleEventWatch(viewer) {
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
      // 鼠标左键点击事件
      handler.setInputAction(function (event) {
        let cartesian = viewer.scene.globe.pick(viewer.scene.camera.getPickRay(event.position), viewer.scene);
        let pick = viewer.scene.pick(event.position);
        console.log(pick);
        if (pick){
          EditPoint(pick.id,handler,[pick.id])
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
  }
}
</script>
<style lang="scss">
.el-switch__label.is-active{
  color: #ff0000;
}
.el-switch__label{
  color: #409EFF;
}
</style>
<style lang="scss" scoped>
.plotting-tool {
  width: 300px;
  position: absolute;
  margin: 10px;
  padding: 10px;
  border: 1px solid rgb(39, 38, 38);
  border-radius: 5px;
  background-color: rgba(19, 19, 19, 0.8);
  z-index: 10;
}
</style>
